<template>  
  <div class="admin-settings">  
    <h1>管理员设置界面</h1>  
    <form @submit.prevent="saveSettings">  
      <div>  
        <label for="customerServicePhone">客服电话：</label>  
        <input type="text" id="customerServicePhone" v-model="customerServicePhone" required>  
      </div>  
      <div>  
        <label for="aboutUs">关于我们：</label>  
        <textarea id="aboutUs" v-model="aboutUs" rows="5" required></textarea>  
      </div>  
      <div>  
        <h3>地址信息</h3>  
        <div>  
          <label for="province">省：</label>  
          <select id="province" v-model="selectedProvince" required>  
            <option disabled value="">请选择</option>  
            <option value="广东省">四川省</option>  
            <option value="浙江省">浙江省</option>  
            <!-- 添加更多省份选项 -->  
          </select>  
        </div>  
        <div>  
          <label for="city">市：</label>  
          <select id="city" v-model="selectedCity" :disabled="!selectedProvince" required>  
            <option disabled value="">请选择</option> 
            <option value="广东省">成都市</option>  
            <option value="浙江省">泸州市</option>  
            <!-- 根据所选省份动态添加市选项 -->  
          </select>  
        </div>  
        <div>  
          <label for="district">区：</label>  
          <select id="district" v-model="selectedDistrict" :disabled="!selectedCity" required>  
            <option disabled value="">请选择</option>
            <option value="广东省">金牛区</option>  
            <option value="浙江省">郫都区</option>   
            <!-- 根据所选市动态添加区选项 -->  
          </select>  
        </div>  
        <label for="detailedAddress">详细地址：</label>  
        <input type="text" id="detailedAddress" v-model="detailedAddress" required>  
      </div>  
      <button type="submit">保存设置</button>  
    </form>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      customerServicePhone: '',  
      aboutUs: '',  
      selectedProvince: '',  
      selectedCity: '',  
      selectedDistrict: '',  
      detailedAddress: ''  
    };  
  },  
  methods: {  
    saveSettings() {  
      // 在这里处理保存设置的逻辑  
      // 你可以发送请求到后端服务器保存数据  
      console.log('保存设置:', {  
        customerServicePhone: this.customerServicePhone,  
        aboutUs: this.aboutUs,  
        province: this.selectedProvince,  
        city: this.selectedCity,  
        district: this.selectedDistrict,  
        detailedAddress: this.detailedAddress  
      });  
    }  
  }  
};  
</script>  
  
<style scoped>  
.admin-settings {  
  margin: 20px;  
}  
  
form {  
  display: flex;  
  flex-direction: column;  
  gap: 10px;  
}  
  
label {  
  display: block;  
  font-weight: bold;  
}  
  
input[type="text"],  
textarea,  
select {  
  width: 100%;  
  padding: 5px;  
  border-radius: 4px;  
  border: 1px solid #ccc;  
}  
  
button {  
  padding: 5px 10px;  
  background-color: #4CAF50;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  
</style>